<template>
    <el-row type="flex" align="middle" class="form-item">
        <!-- label -->
        <el-row class="item-label" justify="end">
            <span v-if="schema?.option?.required" class="required">*</span>
            <span>demo{{ schema.label }}</span>
        </el-row>
        <!-- value -->
        <el-row class="item-value">
            <el-input v-model="dtoValue" v-bind="schema?.option" :placeholder="placeHolder" class="component"
                :class="validaTips ? 'valid-border' : ''" @focus="handleFocus" @blur="handleBlur"></el-input>
        </el-row>
        <!-- 错误信息 -->
        <el-row v-if="validaTips" class="valid-tips">{{ validaTips }}</el-row>
    </el-row>
</template>

<script setup>
import { inject, onMounted, ref, toRefs, watch } from 'vue';

const ajv = inject('ajv')
const props = defineProps({
    schemaKey: String,
    schema: Object,
    modelValue: String
})
const { schemaKey, schema, modelValue } = toRefs(props)

const name = ref("demoInput")
const dtoValue = ref()
const validaTips = ref("")
const placeHolder = ref("")

watch([schema, modelValue], () => {
    validaTips.value = null
    initData()
}, { deep: true })

onMounted(() => {
    initData()
})

const initData = () => {
    dtoValue.value = modelValue.value ?? schema.value?.option?.default
    validaTips.value = null

    const { minLength, maxLength, pattern } = schema.value
    const ruleList = []
    if (schema.value?.option.placeholder) {
        ruleList.push(schema.value?.option.placeholder)
    }
    if (minLength) {
        ruleList.push(`最小长度：${minLength}`)
    }
    if (maxLength) {
        ruleList.push(`最大长度：${maxLength}`)
    }
    if (pattern) {
        ruleList.push(`格式：${pattern}`)
    }
    placeHolder.value = ruleList.join(` | `)
}

const validate = () => {
    validaTips.value = null
    const { type } = schema.value
    if (schema.value?.option?.required && !dtoValue.value) {
        validaTips.value = '不能为空'
        return false
    }
    if (dtoValue.value) {
        const validator = ajv.compile(schema.value)
        const valid = validator(dtoValue.value)
        if (!valid && validator.errors && validator.errors[0]) {
            const { keyword, params } = validator.errors[0]
            if (keyword === 'type') {
                validaTips.value = `类型必须为 ${type}`
            } else if (keyword === 'maxLength') {
                validaTips.value = `最大长度应为 ${params.limit}`
            } else if (keyword === 'minLength') {
                validaTips.value = `最小长度应为 ${params.limit}`
            } else if (keyword === 'pattern') {
                validaTips.value = `格式不正确`
            } else {
                validaTips.value = `校验错误`
            }
            return false
        }
    }
    return true
}

const getValue = () => {
    return dtoValue.value !== undefined ? {
        [schemaKey.value]: dtoValue.value
    } : {}
}

const handleFocus = () => {
    validaTips.value = null
}

const handleBlur = () => {
    validate()
}

defineExpose({
    name,
    validate,
    getValue
})
</script>


<style lang='less' scoped></style>